<template>
	<section class="wrapper">
		<div style="padding: 20px;">
			<div class="top_div">
				<h2>TIKTOK</h2>
				<el-button type="primary" style="padding: 16px 40px;"
					@click="appRouter.push('/automated_operation/look_task')">{{$t('title_text.Look_Task_title')}}</el-button>
			</div>
			<div class="bottom_div">
				<div v-for="(item,index) in state.skip_lists" :key="index" @click="appRouter.push(item.skip_router)">
					<div>
						<svg class="icon" width="40px" height="40px">
							<use :xlink:href="item.iconfont_before"></use>
						</svg>
						<span>{{item.text}}</span>
					</div>
					<i class="iconfont icon24px icon-arrow-right" style="color: #d0d0d0;"></i>
				</div>
			</div>
		</div>
	</section>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onUnmounted,
		getCurrentInstance,
		watch,
		createVNode,
		render
	} from 'vue';
	import request from '@/utils'
	import {
		ElMessage,
		ElMessageBox,
		ElLoading,
		ElIcon
	} from 'element-plus';
	import {
		useStore
	} from 'vuex';
	import {
		useI18n
	} from 'vue-i18n'
	const {
		t
	} = useI18n()
	const appRouter = getCurrentInstance()?.appContext.config.globalProperties.$router
	const store = useStore();
	const state = reactive({
		skip_lists: computed(() => [{
				iconfont_before: '#icon-shipin',
				text: t('title_text.Automatically_Publish_videos_title'),
				skip_router: '/automated_operation/Automatically_Publish_videos'
			},
			{
				iconfont_before: '#icon--_sucaiku',
				text: t('title_text.Material_Center_title'),
				skip_router: '/automated_operation/Material_Center'
			},
			{
				iconfont_before: '#icon-zhanghaoguanli',
				text: t('title_text.Account_Management_title'),
				skip_router: '/automated_operation/Account_Management'
			},
		])
	})
</script>

<style lang="less" scoped>
	h2 {
		margin: 0;
	}

	.wrapper {
		height: 100%;
		background-color: #fff;
		border-radius: 10px;

		.top_div {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20px;
			padding-left: 10px;
			border-bottom: 1px solid #ececec;
		}

		.bottom_div {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			cursor: pointer;
			padding: 3%;

			>div {
				width: 40%;
				padding: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #ececec;
				margin-bottom: 4%;
				border-radius: 10px;

				div {
					display: flex;
					align-items: center;
					gap: 20px;
				}
			}
		}
	}
</style>